<head>
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>

<svg class="bar-chart"></svg>
<svg class="pie-chart"></svg>
<svg class="line-chart"></svg>

<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>
<!-- <script src="../../dist/chart.xkcd.min.js"></script> -->


<script>
  const svg = document.querySelector('.bar-chart')
  
  // github stars vs patrons
  new chartXkcd.Bar(svg, {
    // title: 'github stars vs patrons',
    // labels: ['github stars', 'patrons'],
    data: {
      labels:['github stars', 'patrons'],
      datasets: [{
        // label: 'Battle',
        data: [100, 2],
      }]
    },
  });

  // pie chart example: What Tim is made of
  // javascript js JavaScript and JS

  const svgPie = document.querySelector('.pie-chart');
  new chartXkcd.Pie(svgPie, {
    // title: 'What Tim is made of',
    data: {
      labels:[ 'a', 'b', 'e', 'f', 'g'],
      datasets: [{
        data: [500, 200, 80, 90, 100,],
      }]
    }, 
  })

  const svgLine = document.querySelector('.line-chart');
  new chartXkcd.Line(svgLine, {
    // title: 'Monthly income of an indie developer',
    // xLabel: 'Month',
    // yLabel: '$ Dollars',
    data: {
      labels:['1', '2', '3', '4', '5', '6','7', '8', '9', '10'], 
      datasets: [{
        label: 'Plan',
        data: [30, 70, 200, 300, 500 ,800, 1500, 2900, 5000, 8000],
      }, {
        label: 'Reality',
        data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
      // // }, {
      // //   label: 'vivi',
      // //   data: [5, 12, 20, 7, 10,  35,15, 9, 20, 9, 10, 6],
      // }, {
        // label: 'weweyang',
        // data: [10, 20, 7, 12,  10, 15, 9, 20, 35, 9, 6, 17],
      }]
    },
  })
</script>
